var React = require('react');
var BottomPopupView = require('./BottomPopupView');
var ListView = require('./ListView');

module.exports = React.createClass({
	displayName:'Select',
	getInitialState:function(){
		return {
			label: this.props.label
		}
	},
	componentDidMount:function(){

	},
	__selectItemRender: function (item, index){
		var _text = item[this.props.textKey||'text'];
		return (this.props.selectItemRender&&this.props.selectItemRender(item, index))||<span key={index}><i style={{margin:5}} className={ "fa " + item.icon }></i>{_text}</span>;
	},
	__onSelectItemClick: function (event, item){
		var _popupview = this.refs.popupview,
			_text = item[this.props.textKey||'text'],
			_value = item[this.props.valueKey||'value'];
		_popupview.active(false);
		this.setState({ label: _text });
		this.props.onChange && this.props.onChange(event, {
			text: _text,
			value: _value,
			item: item
		}, this);
	},
	__bottomPopupViewRender: function (){
		return (this.props.bottomPopupViewRender && this.props.bottomPopupViewRender())||<div className="input">
			<div className="label">{this.state.label}</div>
			<div className="icon"><i className={"fa " + this.props.icon}></i></div>
		</div>;
	},
	__onBottomPopupViewClick: function (active, self) {
		if (active) {
			this.refresh();
		}
	},
	refresh: function () {
		this.refs.listview.refresh();
	},
	render:function(){
		return (
			<BottomPopupView
					ref="popupview"
					popupWidth={this.props.popupWidth}
					popupPosition={this.props.popupPosition}
					style={this.props.style}
					onClick={this.__onBottomPopupViewClick}
					render={this.__bottomPopupViewRender} >
				<ListView
					ref="listview"
					autoLoad={false}
					singleSelect={(this.props.singleSelect===undefined?true:this.props.singleSelect)}
					onClick={this.__onSelectItemClick}
					itemRender={this.__selectItemRender}
					data={this.props.data}/>
			</BottomPopupView>
		);
	}
});
